<template>
  <el-dialog title="预览" v-model="visible" width="500px" :fullscreen="mobile" @close="handleCancel">
    <el-form :model="form" ref="formRef" label-width="80px">
      <el-form-item label="模板名称" prop="title" :rules="[{ required: true, message: '请输入模板名称', trigger: 'blur' }]">
        {{ form.title }}
      </el-form-item>
      <el-form-item label="预览">
        <div class="el-textarea el-textarea__inner">
          <div v-if="form.start">{{ form.start }}</div>
          <template v-if="type === 'pwd'">
            <div>房间：<span class="warning-word">201</span></div>
            <div>密码：<span class="warning-word">332211</span></div>
          </template>
          <template v-if="type === 'press'">
            <div>房间：<span class="warning-word">201</span></div>
            <div>账单名称：<span class="warning-word">房租</span></div>
            <div>金额：<span class="warning-word">2300.00</span></div>
          </template>
          <div v-if="type === 'key'">你收到一把电子钥匙，请点击<span class="warning-word">{url链接}</span>“创泰”小程序来开门</div>
          <div v-if="type === 'key' && form.dateFlag">有效期：<span class="warning-word">2021.12.11 12:00-2021.12.12 13:00</span>，密码需要在<span class="warning-word">2021.12.12 12:00</span>前使用过，否则将失效。</div>
          <div v-if="form.end">
            <span v-if="type === 'press' && form.dateFlag">请点击<span class="warning-word">{url链接}</span></span>{{ form.end }}
          </div>
        </div>
        <div>预计产生短信条数：2</div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup name="PreviewDl">
import useAppStore from '@/store/modules/app'

const props = defineProps({
  type: String,
  form: {
    type: Object,
    default: () => {}
  }
})
const visible = ref(false)
const mobile = computed(() => useAppStore().device === 'mobile')

/* 控制弹窗打开 */
function show() {
  visible.value = true
}

defineExpose({
  show
})

function handleCancel() {
  visible.value = false
}

</script>
<style lang="scss" scoped>
.warning-word {
  color: var(--el-color-warning);
}
</style>
